<template>
  <canvas ref="gaugeChartCanvas"></canvas>
</template>

<script>
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

export default {
  name: 'GaugeChart',
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const ctx = this.$refs.gaugeChartCanvas.getContext('2d');
      const maxValue = this.data.max || 100;
      const value = this.data.value || 0;

      const gradient = ctx.createLinearGradient(0, 0, 0, 450);
      gradient.addColorStop(0, '#409EFF');
      gradient.addColorStop(1, '#B3D8FF');

      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: [''],
          datasets: [{
            label: this.data.label || '指标',
            data: [value],
            backgroundColor: this.data.color || gradient,
            borderRadius: 5,
            barThickness: 20
          }]
        },
        options: {
          indexAxis: 'y',
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            x: {
              min: 0,
              max: maxValue,
              display: false
            },
            y: {
              grid: {
                display: false
              },
              ticks: {
                display: false
              }
            }
          },
          plugins: {
            legend: { display: false },
            tooltip: { enabled: false }
          }
        }
      });
    }
  }
};
</script>
